<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form) ?>

<script type="text/javascript" src="../../../js/ajaxfileupload.js"/>
<script type="text/javascript">

    var id = '<?php echo $nodo->getUuid() ?>';
    mostrarArchivo('imagen');
    
    $(document).ready(function(){
    
        // Realiza la búsqueda de fotos
        var busqueda = "<?php echo $nodo->getNombre() ?>";
        google.setOnLoadCallback(OnLoad(busqueda));
    
        // Seteamos el limite
        $('#medio_imagen_pie').keyup(function(){
                limitChars('medio_imagen_pie', 140, 'charlimitinfo');
        });
        
        // Interceptamos el evento submit
        $('#medio_imagen').submit(function() {

            // Revisamos si el usuario quizo subir una foto
            // Si es que tiene seleccionado una foto el cargador, pero aun no ha subido la imagen
            if($('#fileToUpload').val() != '' && $('#medio_imagen_fuente').val() == '' && $('#medio_imagen_opcion').val() == 'archivo'){
                //ajaxFileUpload('<?php echo url_for('medio_imagen/upload')?>', 'imagen', 'images');
                alert('Debes subir la foto antes de guardar el nodo. Haz click en el botón "Subir"');
                $('#buttonUpload').focus();
                return false;
            }
             
            // Validador
            if($('#medio_imagen_codigo').val() != '' || $('#medio_imagen_fuente').val() != ''){
                
                // Despliega el loader
                $('#loader_save').show();
                $('#contenido_nodo').hide();
                
                // Enviamos el formulario usando AJAX
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: $(this).serialize(),
                    // Mostramos un mensaje con la respuesta de PHP
                    success: function(data) {
                        $('#contenido_nodo').html(data);
                        $('#node-caption-'+id).addClass('fondo_imagen');
                        $('#loader_save').hide();
                        $('#contenido_nodo').show();
                    }
                })        
                return false;
            }
            else{
                alert('No ha agregado la imagen');
                return false;
            }
        }); 
    
    });
</script>

<form id="medio_imagen" action="<?php echo url_for('medio_imagen/' . ($form->getObject()->isNew() ? 'create' : 'update') . (!$form->getObject()->isNew() ? '?id=' . $form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>    
    <?php if (!$form->getObject()->isNew()): ?>
        <input type="hidden" name="sf_method" value="put" />
    <?php endif; ?>

    <div id="imagen_upload">
        <ul class="tabs">
            <li id="subir_tab" style="background-color:#eee;">
                <a href="#" onclick="mostrarArchivo('imagen')">Subir</a>
            </li>
            <li id="buscar_google_tab" style="background-color:#dbdbdb;">
                <a href="#" onclick="mostrarGoogle('imagen')">Buscar en Google</a>
            </li>
            <li id="integrar_tab" style="background-color:#dbdbdb; color:#555;">
                <a href="#" onclick="mostrarCodigo('imagen')">Utilizar URL</a>
            </li>
        </ul>
        <div class="medio_container">
            <div id="medio_archivo" class="opciones">
                <legend>Inserte su archivo</legend>
                <div id="upload_file">
                    <?php echo $form['fuente']->renderLabel() ?>: <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></br>
                    <button class="button" id="buttonUpload" onclick="return ajaxFileUpload('<?php echo url_for('medio_imagen/upload')?>', 'imagen', 'images', '<?php echo $nodo->getUuid() ?>');">Subir</button>
                </div>
                <div id="upload_message"></div>
                <img id="loading" src="../../../images/loader.gif" style="display:none;">
            </div>  
            <div id="medio_google" style="display: none;" class="opciones">
                <div id="buscador_google">
                    <p>Selecciona una imagen del buscador</p>
                    Cambiar criterio de búsqueda: <input name="searchTerm" type="text" onkeypress="return buscarImagen(event)" value="<?php echo $nodo->getNombre() ?>" id="busqueda_google" />
                    <input type="button" value="Buscar" onclick="SearchGoogleImages($('#busqueda_google').val());"/>

                    <div id="content" class="photo-album">Cargando...</div><br />
                    <div id="branding" style="float: left;"></div>
                </div>
            </div>
            <div id="medio_codigo" style="display: none;" class="opciones">
                <legend>Copie la URL de la foto</legend>
                <?php echo $form['codigo']->renderLabel() ?>:  <?php echo $form['codigo']; ?>
            </div>
        </div>
    </div>

    <div id="guardar">
        <?php if (!$form->getObject()->isNew()): ?>
            <input type="hidden" name="sf_method" value="put" />
        <?php endif; ?>
        <table id="archivo" style="display: none">
            <tbody>
                <?php foreach ($form as $field):
                    if ($field->getName() == 'codigo' || $field->getName() == 'pie') { ?>

                <?php
                    } else {
                        echo $field;
                    }
                endforeach;
                ?>
            </tbody>
        </table>
        <div id="pie_medio">
            <span class="pie">Descripción:</span><span class="optional">(opcional)</span><br/>
            <?php echo $form['pie']; ?><br/>
            <span id="charlimitinfo" style="float:right;" >Escribe tu texto de 140 caracteres.</span> 
        </div>
        <div id="boton_volver"><button type="button" class="cancelar" onclick="cargarNodo('<?php echo $nodo->getUuid() ?>', true)" >Cancelar</button></div>
        <div id="boton_guardar"><input type="submit" class="boton_guardar" alt="Crear medio"  value="Crear medio" /></div>
    </div>
</form>

